import { Form, Card, Input, Button, Row, Col, message } from "antd";
import { useNavigate } from "react-router-dom";
import { loginAPI } from "../services/auth";
import { setToken } from "../utils/tools";

function Login() {
  const navigate = useNavigate();
  return (
    <div className="login-form">
      <Row>
        <Col
          sm={{ span: 20, push: 2 }}
          xs={{ span: 20, push: 2 }}
          md={{ span: 16, push: 4 }}
          lg={{ span: 12, push: 6 }}
        >
          <img
            style={{
              display: "block",
              margin: "20px auto",
              borderRadius: "16px",
              width: " 120px",
            }}
            src="https://img2.baidu.com/it/u=2060215521,994478729&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
            alt=""
          />
          <Card title="登录">
            <Form
              labelCol={{ span: 3 }}
              onFinish={async (v) => {
                console.log(v);
                const res = await loginAPI(v);
                // console.log(res);
                if (res.code === 1) {
                  setToken(res.data);
                  message.success("登录成功");
                  navigate("/admin"); // 登录成功之后跳转
                } else {
                  message.error(res.data);
                }
                // navigate("/admin"); // 登录成功之后跳转
              }}
            >
              <Form.Item
                label="用户名"
                name="userName"
                rules={[
                  {
                    required: true,
                    message: "请输入用户名",
                  },
                  {
                    min: 3,
                    message: "用户名的长度不能小于3",
                  },
                ]}
              >
                <Input placeholder="请输入用户名" />
              </Form.Item>
              <Form.Item
                label="密码"
                name="password"
                rules={[
                  {
                    required: true,
                    message: "请输入密码",
                  },
                ]}
              >
                <Input.Password placeholder="请输入密码" />
              </Form.Item>
              <Form.Item>
                <Button
                  type="primary"
                  size="large"
                  style={{ display: "block", margin: "0 auto" }}
                  htmlType="submit"
                >
                  登录
                </Button>
              </Form.Item>
            </Form>
          </Card>
        </Col>
      </Row>
    </div>
  );
}

export default Login;
